<template>
  <div
    class="dialog-box layer-dialog"
    element-loading-text="正在加载..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="box-content" style="padding-top: 30px">
      <i
        class="el-icon-error close-box"
        @click="$parent.documentShow = false"
      ></i>
      <div id="documentBox"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "checkDocument",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    // 获取页面宽度
    var pageWidth = window.innerWidth;

    // 获取页面高度
    var pageHeight = window.innerHeight;
    let fileUrl = `http://${this.Global.IP}:8089/${
      process.env.NODE_ENV === "development" ? "documents/" : ""
    }${this.data.fileName}`;
    var docEditor = new DocsAPI.DocEditor("documentBox", {
      document: {
        fileType: "docx",
        key: `${this.data.resourceId}_${this.data.fileName}`,
        title: this.data.fileName,
        url: fileUrl,
      },
      documentType: "word",
      // 编辑器宽度
      width: pageWidth * 0.9,
      // 编辑器高度
      height: pageHeight * 0.9,
    });
  },
};
</script>

<style scoped lang="less">
.close-box {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 1000;
  font-size: 20px;
  color: #fff;
}
#documentBox {
  width: 1200px;
  height: 800px;
}
</style>
